<div class="page-wrapper d-flex flex-column pt-4 w-100" ng-init="getSingle()">
    <div ng-if="viewmodel">
        <div class="container card page-header page-header-feature d-print-none mb-3" style="background-image: url('{{viewmodel.imageUrl}}'); ">
            <div class="page-title-wrapper row align-items-center pt-3">
                <div ng-if="viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Updating...
                    </div>
                    <h2 class="page-title text-white">
                        {{viewmodel.title}}
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
                <div ng-if="!viewmodel.title" class="col-6">
                    <div class="page-pretitle text-white">
                        Create
                    </div>
                    <h2 ng-if="!viewmodel.title" class="page-title text-white">
                        New Page
                    </h2>
                    <p class="lead">{{viewmodel.excerpt}}</p>
                </div>
            </div>
            <span class="mask bg-gradient-primary" style="opacity: 0.5;"></span>
            <div class="page-thumbnail" style="background-image: url({{viewmodel.thumbnailUrl}});    ">
            </div>
        </div>
        <div class="page-body d-flex flex-row-reverse">
            <aside class="bd-sidebar sub-sidebar">
                <nav class="bd-links p-3" aria-label="Sub-section navigation">
                    <div class="card">
                        <actions on-clear-cache="clearCache()" preview-url="viewmodel.detailsUrl" back-url="'/portal/page/list'">
                        </actions>
                        <div class="mb-3"></div>
                        <div class="accordion accordion-flush shadow-none" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        Basic informations
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <div class="mb-3">
                                            <statuses status="viewmodel.status"></statuses>
                                        </div>
                                        <div class="mb-3" ng-if="viewmodel.status == 4">
                                            <label class="form-label">Published Date Time</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Calendar"></i></span>
                                                <input value="{{viewmodel.publishedDateTime}}" ng-model="viewmodel.publishedDateTime" type="datetime-local" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Created Date Time</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Calendar"></i></span>
                                                <input ng-model="viewmodel.createdDateTime" type="text" class="form-control" readonly="readonly" />
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Author</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Contact"></i></span>
                                                <input ng-model="viewmodel.createdBy" class="form-control" readonly="readonly" />
                                            </div>
                                        </div>

                                        <div ng-if="isAdmin" class="mb-3 mb-0">
                                            <label class="form-label">Template</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Layout"></i></span>
                                                <select class="form-select" ng-options="item as item.fileName for item in viewmodel.templates track by item.id" ng-model="viewmodel.view"></select>
                                            </div>
                                        </div>

                                        <div ng-if="isAdmin" class="mb-3 mb-0">
                                            <label class="form-label">Master Template</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="mi mi-Layout"></i></span>
                                                <select class="form-select" ng-options="item as item.fileName for item in viewmodel.masters track by item.id" ng-model="viewmodel.master"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                        Languages
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <cultures is-clone="viewmodel.isClone" data="viewmodel.cultures"></cultures>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                        Images
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <pills ng-if="viewmodel" select-callback="selectPane(pane)" class="mb-4 nav-fill">
                                            <pill header="Feature">
                                                <custom-image header="'Image upload'" type="'Pages'" folder="viewmodel.seoName" title="viewmodel.title" description="viewmodel.excerpt" src-url="viewmodel.imageUrl" src="viewmodel.image" auto="'true'">
                                                </custom-image>
                                            </pill>
                                            <pill header="Thumbnail">
                                                <custom-image header="'Thumbnail upload'" type="'Pages'" folder="viewmodel.seoName" title="viewmodel.title" description="viewmodel.excerpt" src-url="viewmodel.thumbnailUrl" src="viewmodel.thumbnail" auto="'true'">
                                                </custom-image>
                                            </pill>
                                        </pills>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading-urlalias">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-urlalias" aria-expanded="false" aria-controls="flush-collapse-urlalias">
                                        URL alias
                                    </button>
                                </h2>
                                <div id="flush-collapse-urlalias" class="accordion-collapse collapse" aria-labelledby="flush-heading-urlalias" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <!-- TODO: Hoang to check the add slugs button not working -->
                                        <button class="btn btn-link text-primary btn-sm py-0" type="button" ng-click="addAlias()">
                                            <span class="fas fa-plus text-primary"></span> Add slugs
                                        </button>
                                        <url-alias ng-repeat="alias in viewmodel.urlAliases" index="$index" url-alias="alias" remove-callback="removeAliasCallback(index)"></url-alias>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading-quickview">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse-quickview" aria-expanded="false" aria-controls="flush-collapse-quickview">
                                        Quick Preview
                                    </button>
                                </h2>
                                <div id="flush-collapse-quickview" class="accordion-collapse collapse" aria-labelledby="flush-heading-quickview" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <style>
                                            .hd-screen .wrap-a {
                                                margin-left: -0;
                                                margin-top: -0;
                                            }
                                            
                                            .hd-screen .wrap-b {
                                                max-width: 513px;
                                                height: 216px;
                                                padding: 0;
                                            }
                                            
                                            .hd-screen .wrap-c {
                                                width: 1920px;
                                                height: 1080px;
                                                /* margin-left: 2px; */
                                                -webkit-transform: scale(0.2);
                                                -webkit-transform-origin: 0 0;
                                            }
                                            
                                            .m-screen .wrap-a {
                                                margin-left: -0;
                                                margin-top: -0;
                                            }
                                            
                                            .m-screen .wrap-b {
                                                max-width: 513px;
                                                height: 668px;
                                                padding: 0;
                                            }
                                            
                                            .m-screen .wrap-c {
                                                width: 380px;
                                                height: 668px;
                                                /* margin-left: 2px; */
                                                -webkit-transform: scale(1);
                                                -webkit-transform-origin: 0 0;
                                            }
                                            
                                            .l-screen .wrap-a {
                                                margin-left: -0;
                                                margin-top: -0;
                                            }
                                            
                                            .l-screen .wrap-b {
                                                max-width: 513px;
                                                height: 668px;
                                                padding: 0;
                                            }
                                            
                                            .l-screen .wrap-c {
                                                width: 416px;
                                                height: 710px;
                                                /* margin-left: 2px; */
                                                -webkit-transform: scale(0.94);
                                                -webkit-transform-origin: 0 0;
                                            }
                                        </style>
                                        <pills ng-if="viewmodel" select-callback="selectPane(pane)" class="mb-4 nav-fill">
                                            <pill header="Mobile">
                                                <div class="l-screen">
                                                    <div class="wrap-a border radius" id="pills-tabContent">
                                                        <div class="wrap-b overflow-hidden" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                                            <iframe id="preview-iframe" class="wrap-c transitions-Mixcore Studio " src="{{viewmodel.detailsUrl}}" style="opacity: 1;"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </pill>
                                            <pill header="Desktop">
                                                <div class="hd-screen">
                                                    <div class="wrap-a border radius" id="pills-tabContent">
                                                        <div class="wrap-b overflow-hidden" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                                            <iframe id="preview-iframe" class="wrap-c transitions-Mixcore Studio " src="{{viewmodel.detailsUrl}}" style="opacity: 1;"></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </pill>
                                        </pills>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5"></div>
                    </div>
                </nav>
            </aside>

            <!-- ----------------------------------------------------------- -->
            <div class="content-body py-3 pe-3">
                <section class="pt-4 pb-3">
                    <!-- <form ng-class="{'submitted': submitted}" ng-submit="save()"> -->
                    <div class="row">
                        <section class="pr-3">
                            <tabs-v class="mb-3">
                                <pane-v icon="fas fa-pen" header="Content">
                                    <page-content model="viewmodel" additional-data="additionalData"></page-content>
                                </pane-v>
                                <pane-v icon="fas fa-search" header="SEO">
                                    <page-seo page="viewmodel"></page-seo>
                                </pane-v>
                                <pane-v icon="fas fa-cubes" header="Modules" ng-if="isAdmin">
                                    <page-modules page="viewmodel"></page-modules>
                                </pane-v>
                                <!-- <pane-v icon="fas fa-eye" header="Preview">
                                <div class="card card-body  hd-screen">

                                    <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                                data-bs-target="#pills-home" type="button" role="tab"
                                                aria-controls="pills-home" aria-selected="true">Desktop</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                                data-bs-target="#pills-profile" type="button" role="tab"
                                                aria-controls="pills-profile" aria-selected="false">Mobile</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content wrap-a" id="pills-tabContent">
                                        <div class="tab-pane fade show active wrap-b" id="pills-home" role="tabpanel"
                                            aria-labelledby="pills-home-tab">
                                            <iframe id="preview-iframe" class="wrap-c transitions-Mixcore Studio "
                                                src="/page/12/about-us_1" style="opacity: 1;"></iframe>
                                        </div>
                                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                            aria-labelledby="pills-profile-tab">...</div>
                                    </div>
                                </div>
                            </pane-v> -->
                                <pane-v icon="fas fa-cog" header="" class="ms-auto" ng-if="isAdmin">
                                    <page-advanced model="viewmodel" additional-data="additionalData"></page-advanced>
                                </pane-v>
                            </tabs-v>
                        </section>
                    </div>
                    <!-- </form> -->
                </section>
                <!-- /.content -->
            </div>
        </div>
    </div>
</div>